<template>
	<view class="container">
		<kefu :qq="parseInt(gConfig.common_app_customer_service_tel)" v-if="gConfig.common_app_is_online_service=='1'"></kefu>
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
					<view class="image-wrapper">
						<image
							:src="item.images" 
							class="loaded" 
							mode="aspectFill"
						></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="introduce-section">
			<text class="bianhao" v-if="goodsDetail.model">商品型号:{{goodsDetail.model}}</text>
			<view class="title">{{goodsDetail.title}}</view>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">{{goodsDetail.price}}</text>
				<text class="m-price">{{goodsDetail.show_field_original_price_text}}:¥{{goodsDetail.original_price}}</text>
				<text class="coupon-tip">{{goodsDetail.discount}}折</text>
			</view>
			<view class="bot-row">
				<text>销量: {{goodsDetail.sales_count}}</text>
				<text>库存: {{goodsDetail.inventory}}</text>
				<text>浏览量: {{goodsDetail.sales_count}}</text>
			</view>
		</view>
		
		<!--  分享 -->
		<!-- #ifdef APP-PLUS -->
		<view class="share-section" @click="share">
			<view class="share-icon">
				<text class="iconfont icon-fenxiang"></text>
			</view>
			<text class="tit">喜欢就告诉你的朋友吧！</text>
			<view class="share-btn">
				立即分享
				<text class="iconfont icon-jiantouarrow487"></text>
			</view>
			
		</view>
		<!-- #endif -->
		
		
		<view class="c-list">
			<view class="c-row b-b" @click="toggleSpec">
				<text class="tit">购买类型</text>
				<view class="con">
					<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
						{{sItem.value}}
					</text>
				</view>
				<text class="iconfont icon-jiantouarrow487"></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">优惠券</text>
				<text class="con t-r red">领取优惠券(功能暂未做)</text>
				<text class="iconfont icon-jiantouarrow487"></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">促销活动</text>
				<view class="con-list">
					<text>(功能暂未做)</text>
					<text>新人首单送20元无门槛代金券</text>
					<text>订单满50减10</text>
					<text>订单满100减30</text>
					<text>单笔购买满两件免邮费</text>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">服务</text>
				<view class="bz-list con">
					<text>7天无理由退换货 ·</text>
					<text>假一赔十 ·</text>
				</view>
			</view>
		</view>
		
		<!-- 评价 -->
		<view class="eva-section" v-if="goodsDetail.comments_count>0">
			<view class="e-header">
				<text class="tit">评价</text>
				<text>({{goodsDetail.comments_count}})</text>
				<text class="tip" @tap="toComments">更多评价</text>
				<text class="iconfont icon-jiantouarrow487"></text>
			</view> 
			<view class="eva-box" v-if="comments.user">
				<image class="portrait" :src="comments.user.avatar" mode="aspectFill"></image>
				<view class="right">
					<text class="name">{{comments.user.user_name_view||''}}</text>
					<text class="con" v-if="comments.content">{{comments.content.substr(0,30) ||''}}</text>
					<view class="bot">
						<text class="attr">购买类型：{{comments.msg||''}}</text>
						<text class="time">{{comments.add_time_date||''}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="detail-desc">
			<view class="d-header">
				<text>图文详情</text>
			</view>

			<view class="content">
				<rich-text :nodes="goodsDetail.content_wap" class="txt" v-if="goodsDetail.content_wap"></rich-text>
				<rich-text :nodes="goodsDetail.content_web" v-else class="txt"></rich-text>
	
			</view>
		</view>
		
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="iconfont icon-home"></text>
				<text class="txt">首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<text class="iconfont icon-cart"></text>
				<text class="txt">购物车</text>
			</navigator>
			<view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
				<text class="iconfont icon-shoucang"></text>
				<text class="txt">收藏</text>
			</view>
			
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @tap="buy">立即购买</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @tap="addCart(goodsDetail)">加入购物车</button>
			</view>
		</view>
		
		
		<!-- 规格-模态层弹窗 -->
		<view 
			class="popup spec" 
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="specSelectedParam.images"></image>
					<view class="right">
						<view class="bianhao" v-if="specSelectedParam.coding">商品编号:{{specSelectedParam.coding}}</view>
						<view class="price">¥{{specSelectedParam.price}}<text class="m-price">原价:¥{{goodsDetail.original_price}}</text></view>
			
						<text class="stock">库存：{{specSelectedParam.inventory}}件</text>
						<view class="selected">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem['value']}}
							</text>
						</view>
					</view>
				</view>
				<!-- 规格属性展示 -->
				<view v-for="(item,index) in specList" :key="index" class="attr-list">
					<text>{{item.title}}</text>
					<view class="item-list">
						<text 
							v-for="(childItem, childIndex) in item.value" 
							:key="childIndex" class="tit"
							:class="{selected: childItem==specSelected[index]['value']}"
							@tap="selectSpec(specSelected[index]['type'],childItem)"
						>
							{{childItem}}
						</text>
					</view>
				</view>
				<!-- 购买数量 -->
				<view class="buyNum">
					<text>购买数量</text>
					<view class="count">
						<view class="left" @tap="subNum">-</view>
						<view class="mid">{{stock}}</view>
						<view class="right" @tap="addNum">+</view>
					</view>
				</view>
				
				<button class="btn" @click="toggleSpec">完成</button>
			</view>
		</view>
		<!-- fenxiang -->
		<!-- #ifdef APP-PLUS-->
			<app-share :strShareUrl="shareUrl"
					   :strShareTitle="shareTitle"
					   :strShareSummary="shareSummary"
					   :strShareImageUrl="shareImageUrl"
					   @tap="clickShare"
					   ref="appShare"></app-share>
		<!-- #endif -->
	</view>
</template>

<script>
	//#ifdef APP-PLUS
		import appShare from '@/components/appShare/appShare.vue'
	//#endif
	import kefu from '@/components/yu-kefu.vue'
	export default{
		components: {
			//#ifdef APP-PLUS
				appShare,
			//#endif
			kefu
		},
		data() {
			return {
				userInfo:[],
				gConfig:[],
				id:1,
				specClass: 'none',
				specChoose:[], //可供选择的规格参数
				specSelected:[], //选中的规格参数
				specSelectedParam:[],  //选中规格的详细参数
				stock:1, //购买数量
				goodsDetail:[], //商品详情
				favorite: 0,
				imgList: [], //商品相册
				specList: [], //商品的规格列表
				comments:{
					content:''  //预先把content设置成字符串类型，放置截取的时候报错
				},//商品评论
				shareUrl: '',
				shareTitle: '快来围观，到底发生了什么',
				shareSummary: '哇，真的很精彩，什么你想看的都有',
				shareImageUrl: '/static/sharemenu/share.jpg'
			};
		},
		onLoad(params){
			this.gConfig=uni.getStorageSync('gConfig');
			this.userInfo=uni.getStorageSync('gUserInfo');
			// 商品id
			this.id=params.id;
			// 商品所属分类cid
			this.cid=params.cid;
			var self=this;
			// 请求数据地址
			var goodsDetailUrl=this.requestUrl.goodsDetail;
			var param={
				data:{
					goods_id:this.id
				}
			}
			this.util.request(goodsDetailUrl,'post',function(res){
				if(res.data.code==0 && res.data.data){
					// 商品详情信息
					self.goodsDetail=res.data.data.goods;
					// 商品组图
					self.imgList=self.goodsDetail.photo;
					// 商品的规格类表
					self.specList=self.goodsDetail.spec_base;
					// 可供选择的规格参数
					self.specChoose=self.goodsDetail.specifications.choose;
					// 计算售价跟市场价比的  折扣率
					self.goodsDetail['discount']=(self.goodsDetail['min_price']/self.goodsDetail['max_original_price']*10).toFixed(1);
					// 当前用户，商品是否收藏
					self.favorite=self.goodsDetail.is_favor
					//规格 默认选中第一条
					var specData={};
					if(self.specChoose.length>0){
						for (let index in self.specChoose) {
							specData={
								'type':self.specChoose[index].name,
								'value':self.specChoose[index].value[0]['name'],
								'images':self.specChoose[index].value[0]['images'],
							}
							self.specSelected.push(specData);
						}
					}
				}
			},param);
			
			// 获取商品评论
			let goodsComments=this.requestUrl.getGoodsComments;
			let commentsParams={
				data:{
					goods_id:this.id
				}
			}
			this.util.request(goodsComments,'post',function(res){
				if(res.data.code==0 && res.data.data){
					self.comments=res.data.data.data[0];
				}
			},commentsParams)
		},
		methods:{
			//规格弹窗开关
			toggleSpec() {
				if(this.specClass === 'show'){
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				}else if(this.specClass === 'none'){
					this.specClass = 'show';
				}
			},

			selectSpec(type,value){
				// 根据传进来的，点击数据，例如，type：颜色，value：白色
				// 取出 颜色组里，白色对应的图片 拼装复制给变量specData
				// 用specData替换this.specSelected里的数据
				var specData={};
				this.specChoose.forEach(item=>{
					if(type==item.name){
						for (let index in item.value) {
							if(value==item.value[index].name){
								specData={
									'type':type,
									'value':value,
									'images':item.value[index].images
								}
								break;
							}
						}
					}
				});
				//深度赋值,用 '=' 直接赋值，例如：temp=this.specSelected,这时 temp值变化，this.specSelected值也变化，其实赋值的是内存地址。
				//vue的watch监听，在两种情况下监听不到：
				//1.利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue;
				//2.修改数组的长度时，例如：arr.length = newLength;
				//这就是这里不直接用 this.specSelecte操作，而用了一个中间变量temp
				const temp=JSON.parse(JSON.stringify(this.specSelected));
				for (let index in temp) {
					if(temp[index].type==type){
						temp[index]=specData;
						break;
					}
				}
				this.specSelected=temp;
			},
			//分享
			share(){
				this.shareTitle=this.goodsDetail.title;
				this.shareImageUrl=this.goodsDetail.images;
				this.shareUrl=this.requestUrl.host + '/h5/#/pages/product/product?id='+this.goodsDetail.id;
				console.log(this.shareUrl);
				this.$refs.appShare.share();
			},
			// 到评价列表页
			toComments(){
				uni.navigateTo({
					url:`/pages/comments/commentsList?id=${this.id}`
				})
			},
			//收藏
			toFavorite(){
				let favorUrl=this.requestUrl.favor;
				let self=this;
				let params={
					data:{
						id:this.id
					}
				}
				this.util.request(favorUrl,'post',function(res){
					if(res.data.code==0 || res.data.data){
						self.favorite=res.data.data.status
						uni.showToast({
							title: res.data.msg,
							duration:1500,
						});
					}else if(res.data.code==-400){
						uni.showToast({
							title: '请登录',
							duration:1500,
						});
					}
				},params)
				
			},
			// 增加数量
			addNum(){
				this.stock++
			},
			// 减少数量
			subNum(){
				// 数量大于1的时候才能减
				if(this.stock>1){
					this.stock--
				}
			},
			// 立即购买
			buy(){
				if(this.userInfo){
					let goodsData={
						buy_type:'goods',
						goods_id:this.id,
						stock:this.stock,
						spec: JSON.stringify(this.specSelected) //选中的规格参数
					};
					uni.navigateTo({
						url: `/pages/order/createOrder?goodsData=${JSON.stringify({goodsData})}`
					})
				}else{
					uni.showToast({
						title: '请登录',
						duration:1500,
					});
				}
				
			},
			// 加入购物车
			addCart(){
				let param={
					data:{
						goods_id:this.id, //商品id
						stock: this.stock  ,// 商品数量
						spec: JSON.stringify(this.specSelected) //选中的规格参数
					}
				};
				// 
				let addCartUrl=this.requestUrl.addCart;
				this.util.request(addCartUrl,'post',function(res){
					if(res.data.code==0){
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
						});
					}else{
						uni.showToast({
							title: res.data.msg,
							image:'/static/icon/error.png',
							duration: 1500,
							success() {
								setTimeout(function(){
									uni.navigateTo({
										url: '/pages/member/login'
									})
								},1500)
							}
						});
					}
					
				},param)
			},
			stopPrevent(){}
		},
		watch:{
			specSelected:function(){
				var spec='';
				var self=this;
				//商品规格 字符串 例如：粉色,XL   这种结构
				this.specSelected.forEach(item=>{
					spec += item['value']+',';
				})
				// 去掉字符串最后的 ','
				spec=spec.substring(0,spec.length-1);
				var specParam={
					data:{
						id:this.id, //商品id
						spec:spec  //商品规格 字符串 例如：粉色,XL   这种结构
					}
				}
				var goodsSpecDetailUrl=this.requestUrl.goodsSpecDetail;
				this.util.request(goodsSpecDetailUrl,'post',function(res){
					if(res.data.code==0 && res.data.data){
						self.specSelectedParam=res.data.data;
						self.specSelectedParam['images']='';
						// 如果有多个规格都上传了图片，比方说，红色上传了图片，L号也上传了图片，那么  红色，L号这个组合调用的图片，使用查到的第一个规格的图片
						for (let index in self.specSelected) {
							if(self.specSelected[index]['images'] !==''){
								self.specSelectedParam['images']=self.specSelected[index]['images'];
								break;
							}
						}
					}
				},specParam);
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: $uni-bg-color-grey;
		padding-bottom: 160upx;
	}
	.icon-you{
		font-size:$uni-font-size-base;
		color: $uni-text-color-grey;
	}
	.carousel {
		height: 722upx;
		position:relative;
		swiper{
			height: 100%;
		}
		.image-wrapper{
			width: 100%;
			height: 100%;
		}
		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		
	}
	
	/* 标题简介 */
	.introduce-section{
		background:$uni-bg-color;
		padding: 20upx 30upx;
		.bianhao{
			font-size: $uni-font-size-sm;
			color:$uni-text-color-grey;
		}
		.title{
			font-size: $uni-font-size-base;
			color:$uni-text-color;
			line-height: 40upx;
			width:100%
		}
		.price-box{
			display:flex;
			align-items:baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color:$uni-text-color-zhu;
		}
		.price{
			font-size: $uni-font-size-lg + 2upx;
		}
		.m-price{
			margin:0 12upx;
			color: $uni-text-color-grey;
			text-decoration: line-through;
		}
		.coupon-tip{
			align-items: center;
			padding: 4upx 10upx;
			background:$uni-bg-color-zhu;
			font-size: $uni-font-size-sm;
			color: $uni-text-color-inverse;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx); 
		}
		.bot-row{
			display:flex;
			align-items:center;
			height: 50upx;
			font-size: $uni-font-size-sm;
			color:$uni-text-color-grey;
			text{
				flex: 1;
			}
		}
	}
	/* 分享 */
	.share-section{
		display:flex;
		align-items:center;
		color: $uni-text-color;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12upx 30upx;
		.share-icon{
			display:flex;
			align-items:center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-border-color;
			border-radius: 4upx;
			position:relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-bg-color-zhu;
		}
		.tit{
			font-size: $uni-font-size-base;
			margin-left:10upx;
		}
		.icon-bangzhu1{
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}
		.share-btn{
			flex: 1;
			text-align:right;
			font-size: $uni-font-size-sm;
			color: $uni-bg-color-zhu;
		}
		.icon-jiantouarrow487{
			font-size: $uni-font-size-sm;
			margin-left: 4upx;
			color: $uni-bg-color-zhu;
		}
	}
	
	.c-list{
		font-size:$uni-font-size-base;
		color: $uni-text-color;
		background: $uni-bg-color;
		.c-row{
			display:flex;
			align-items:center;
			padding: 20upx 30upx;
			position:relative;
		}
		.tit{
			width: 140upx;
		}
		.con{
			flex: 1;
			color: $uni-text-color;
			.selected-text{
				margin-right: 10upx;
			}
		}
		.bz-list{
			height: 40upx;
			font-size:$uni-font-size-sm+2upx;
			color:$uni-text-color;
			text{
				display: inline-block;
				margin-right: 30upx;
			}
		}
		.con-list{
			flex: 1;
			display:flex;
			flex-direction: column;
			color:$uni-text-color;
			line-height: 40upx;
		}
		.red{
			color: $uni-text-color-zhu;
		}
	}
	
	/* 评价 */
	.eva-section{
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: $uni-bg-color;
		margin-top: 16upx;
		.e-header{
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $uni-font-size-sm + 2upx;
			color: $uni-text-color-grey;
			.tit{
				font-size: $uni-font-size-base + 2upx;
				color: $uni-text-color;
				margin-right: 4upx;
			}
			.tip{
				flex: 1;
				text-align: right;
			}
			.icon-you{
				margin-left: 10upx;
			}
		}
	}
	.eva-box{
		display: flex;
		padding: 20upx 0;
		.portrait{
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}
		.right{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $uni-font-size-base;
			color: $uni-text-color;
			padding-left: 26upx;
			
			.con{
				font-size: $uni-font-size-base;
				color: $uni-text-color;
				padding: 20upx 0;
			}
			.bot{
				display: flex;
				justify-content: space-between;
				font-size:$uni-font-size-sm;
				color:$uni-text-color;
				.time{
					color:$uni-text-color-grey ;
				}
				.attr{
					color:$uni-text-color-grey ;
				}
			}
		}
	}
	/*  详情 */
	.detail-desc{
		background: $uni-bg-color;
		margin-top: 16upx;
		.d-header{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $uni-font-size-base + 2upx;
			color: $uni-text-color;
			position: relative;
				
			text{
				padding: 0 20upx;
				background:$uni-bg-color;
				position: relative;
				z-index: 1;
			}
			&:after{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid $uni-text-color-grey; 
			}
		}
		.content{width:100%;display: flex;flex-direction: column;}
		.txt{font-size: $uni-font-size-base;margin:30rpx 0;padding:0 24rpx;line-height:60rpx;}
		.pic{width:100%;}
	}
	
	/* 规格选择弹窗 */
	.attr-content{
		padding: 10upx 30upx;
		.a-t{
			display: flex;
			image{
				width: 280upx;
				height: 280upx;
				flex-shrink: 0;
				margin-top: -80upx;
				border-radius: 8upx;;

			}
			.right{
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $uni-font-size-sm + 2upx;
				color: $uni-text-color;
				line-height: 42upx;
				.price{
					font-size: $uni-font-size-lg;
					color:$uni-text-color-zhu;
					margin-bottom: 10upx;
				}
				.m-price{color:$uni-text-color-grey;font-size: $uni-font-size-sm - 2upx;text-decoration: line-through;}
				.bianhao{font-size: $uni-font-size-sm - 2upx;color:$uni-text-color-grey;}
				.selected-text{
					margin-right: 10upx;
				}
			}
		}
		.attr-list{
			display: flex;
			flex-direction: column;
			font-size: $uni-font-size-base + 2upx;
			color: $uni-text-color;
			padding-top: 30upx;
			padding-left: 10upx;
		}
		.item-list{
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;
			text{
				display: flex;
				align-items: center;
				justify-content: center;
				background:$uni-bg-color-grey;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $uni-font-size-base;
				color: $uni-text-color;
			}
			.selected{
				background: $uni-bg-color-grey;
				color: $uni-text-color-zhu;
			}
		}
	}
	
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: $uni-bg-color;
			box-sizing: border-box;
			.btn{
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-bg-color-zhu;
				font-size: $uni-font-size-base + 2upx;
				color: $uni-text-color-inverse;
				margin: 30upx auto 20upx;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
	
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 30upx;
		bottom:30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 16upx;
		
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size:$uni-font-size-sm;
			color: $uni-font-size-base;
			width: 96upx;
			height: 80upx;
			.txt{
				font-size:$uni-font-size-sm ;
			}
			&.active, &.active .iconfont,&.active .icon-shoucang:before{
				color: $uni-bg-color-zhu;
			}
			.icon-fenxiang2{
				font-size: 42upx;
				transform: translateY(-2upx);
			}
		}
		.action-btn-group{
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
			margin-left: 20upx;
			position:relative;
			&:after{
				content: '';
				position:absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255,255,255,.5);
			}
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size:$uni-font-size-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}
	.buyNum{padding:20rpx;border-top:solid 1px $uni-border-color;display: flex;flex-direction: row;align-items: center;height: 100rpx;justify-content:space-between;margin-top: 20rpx;}
	.buyNum text{font-size: $uni-font-size-lg;}
	.buyNum .count{font-size: $uni-font-size-lg;display: flex;flex-direction: row;}
	.buyNum .count .left,.buyNum .count .right{font-size:$uni-font-size-lg + 16upx;background:#eaedeb;width:60rpx;height: 60rpx;text-align: center;line-height: 60rpx;}
	.buyNum .count .mid{width:100rpx;height: 60rpx;text-align: center;line-height: 60rpx;}
	.icon-home:before{
		content:'\f246';
		color: $uni-text-color-grey;
		font-size: $uni-font-size-lg + 8upx;
	}
	.icon-cart:before{
		content:'\e63a';
		color: $uni-text-color-grey;
		font-size: $uni-font-size-lg + 8upx;
	}
	
	.icon-shoucang:before{
		content:'\e611';
		color: $uni-text-color-grey;
		font-size: $uni-font-size-lg + 6upx;
		/* position: relative;
		top:2rpx */
	}
	
</style>
